<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素的显示模式</title>
		<link href="css/元素的显示模式.css" rel="stylesheet"/>
	</head>
	<body>
		<!-- 
		元素的显示模式：
		  1.块元素  block
		    比较霸道，单独占一行
			默认宽度是父级元素宽度的100%
			可以设置宽，高
			块元素内可以包括行内元素或块元素
			！！！文字类的标签不能使用块元素，主要用于存放文字，标签内不能放块级元素
		  2.行内元素  inline
		    一行显示多个
			默认宽度是内容的宽度
			宽，高，对齐属性设置无效
			行内元素里一般只包含文本或其他行内元素
			！！！链接标签里不能包含链接标签
		  3.行内块元素  inline-block
		    一行显示多个
			默认宽度是内容本身的宽度
			可以设置宽，高
			<input />,<img /><td></td>
		元素显示模式转换：
		  display:block/inline-block/inline
		  -->
		<div>
			<h4>redmi k70</h4>
			<p>性能......</p>
			<span>2399元</span>
			<del>2499元</del>
		</div>
		<span>用户名</span>
		<input type="text" />
		<span>密码</span>
		<input type="password"/>
		<a href="#">baidu......</a>
	</body>
</html>
